import { Select, SelectProps } from "antd";
import React, { useState, useEffect } from "react";

const FetchDataWithEffect: React.FC = () => {
  const [person, setPerson] = useState<string>("xh");
  const [bio, setBio] = useState<string | null>(null);

  function handleChange(value: string) {
    setPerson(value);
  }

  const options: SelectProps["options"] = [
    { label: "xh", value: "xh" },
    { label: "xdd", value: "xdd" },
    { label: "xdz", value: "xdz" },
    { label: "xdy", value: "xdy" },
    { label: "xmz", value: "xmz" }
  ];

  console.log("render...");

  useEffect(() => {
    let ignore = false;
    setBio(null);
    setTimeout(() => {
      Promise.resolve(person).then(result => {
        if (!ignore) {
          setBio(result);
        }
      });
    }, 2000);

    return () => {
      ignore = true;
    };
  }, [person]);

  return (
    <>
      <Select style={{ width: 100 }} value={person} onChange={handleChange} options={options} />
      <hr />
      <p>
        <i>{bio ?? "Loading..."}</i>
      </p>
    </>
  );
};
export default FetchDataWithEffect;
